<template>
  <customLoading v-if="isLoading" />
  <div v-else>
    <template v-if="!todoList.length">
      <div class="flex flex-row-reverse pr-4 pt-3">
        <img
          src="@/icons/svg/customer/filter_icon.svg"
          class="cursor-pointer"
          @click="onClickFilter"
        />
      </div>
      <van-empty description="暂无内容" />
    </template>

    <div class="px-4" v-else>
      <div class="flex flex-row justify-between my-4 text-sm head">
        <div class="text-[#595959]">共{{ todoList.length }}个待办</div>
        <img
          src="@/icons/svg/customer/filter_icon.svg"
          class="cursor-pointer"
          @click="onClickFilter"
        />
      </div>

      <div v-ai-tip class="flex flex-col">
        <todoInfoCard
          v-for="(item, index) of todoList"
          :key="index"
          class="mb-4"
          :item="item"
          @onChange="onStatusChange"
        />
      </div>
    </div>
  </div>
  <van-popup v-model:show="showFilter" position="top">
    <todoFilterView @onConfirm="onCofirmFilter" :filterDateUnit="filterDateUnit"
  /></van-popup>
</template>

<script setup>
import todoInfoCard from "./todoInfoCard.vue";
import { useCustomerStore, useBusinessStore } from "@/store";
import { onMounted, computed, ref, defineProps } from "vue";
import todoFilterView from "./todoFilterView.vue";
import {
  getDateRange,
  formatCompletionTime,
  ParameterDateType,
  getLongTimeAgo,
} from "@/utils/timeTool";
import customLoading from "../customLoading.vue";

const store = useCustomerStore();
const businessStore = useBusinessStore();
const filterDateUnit = ref(store.getDefaultDateUnit);
const apiParameter = ref(null);
const isLoading = ref(false);

onMounted(() => {
  let data = getDefaultParameter();
  getData(data);
});

const props = defineProps({
  isCustomer: {
    type: Boolean,
    default: true,
  },
});

function getDefaultParameter() {
  const dateRange = store.getDefaultDateRange();
  return {
    startTime: formatCompletionTime(dateRange.st, ParameterDateType.START_DATE),
    endTime: formatCompletionTime(dateRange.et, ParameterDateType.ENE_DATE),
    done: false,
    orderBy: "startTime",
  };
}

async function getData(data) {
  apiParameter.value = data;
  isLoading.value = true;
  if (props.isCustomer) {
    await store.getCustomerTodoListAction(data);
  } else {
    await businessStore.getOpportunityTodoListAction(data);
  }
  isLoading.value = false;
}

const showFilter = ref(false);
function onClickFilter() {
  showFilter.value = true;
}

function onStatusChange() {
  getData(apiParameter.value);
}

function onCofirmFilter(parameter) {
  const { done, orderBy } = parameter;
  // filterDateUnit.value = dateUnit;
  // const startTime = getDateRange(dateUnit).startDate;
  // const dateRange = store.getDefaultDateRange();

  const dateRange = getLongTimeAgo();
  let data = {
    startTime: dateRange.st,
    endTime: dateRange.et,
    done,
    orderBy,
  };
  showFilter.value = false;
  getData(data);
}

const todoList = computed(() => {
  return props.isCustomer ? store.toDoList : businessStore.toDoList;
});
</script>

<style lang="less" scoped>
.head {
  font-size: 14px;
  color: #595959;
  line-height: 22px;

  img {
    width: 16px;
  }
}
</style>
